<template>
  <el-container>
    <el-header style="background-color: white;color: black;">
      <h1 align="center">商品销售情况折线统计图</h1>
    </el-header>
    <el-main>
      <div class="echart" id="mychart" :style="myChartStyle"></div>
    </el-main>
  </el-container>

</template>

<script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        myChart: {},
        goodsName: [], //横坐标，商品
        saleNums: [], //每种商品销售量
        salePriceCount: [], //每种商品销售总额
        myChartStyle: {
          float: "left",
          width: "100%",
          height: "400px"
        } //图表样式
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      initEcharts() {
        const option = {
          xAxis: {
            data: this.goodsName
          },
          legend: { // 图例
            data: ["销量", "销售额"],
            bottom: "0%"
          },
          yAxis: {},
          series: [{
              name: "销量",
              data: this.saleNums,
              type: "line", // 类型设置为折线图
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: 16
                }
              }
            },
            {
              name: "销售额",
              data: this.salePriceCount,
              type: "line", // 类型设置为折线图
              label: {
                show: true,
                position: "bottom",
                textStyle: {
                  fontSize: 16
                }
              }
            }
          ]
        };
        this.myChart = echarts.init(document.getElementById("mychart"));
        this.myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.myChart.resize();
          this.myChart.setOption({
                    xAxis: [
                      {
                        data: this.goodsName,
                      }
                    ]
                  });
        });
      },
      loadData() {
        var self = this;
        var http = this.$http.get("/sale/chart",{

        });
        http.then(function(rs){
          if(rs.data.success){
            self.goodsName = rs.data.data.goodsList;
            self.saleNums = rs.data.data.saleNumsList;
            self.salePriceCount = rs.data.data.salePriceCountList;
            self.initEcharts();
          }
        });
      }
    },

  };
</script>



<style>
</style>
